<template>
    <n-card
        title="音频选择"
        :segmented="{
                  content: true,
                  footer: 'soft'
                }">
      <template #header-extra>
        <n-button type="primary" @click="modalShow = true">选择音频</n-button>
        <n-button type="warning" @click="removeAudioFile" style="margin-left: 5px">删除</n-button>
      </template>
      <audio
          v-if="audioFileId"
          ref="audioPlayer"
          controls
          style="width: 100%;margin-top: 10px"
          :src=fileFunction.getViewFilePathByUserFileId(audioFileId)
      >
      </audio>
      <n-space justify="center">
        <n-empty description="未选择音频" v-if="!audioFileId">
        </n-empty>
      </n-space>
    </n-card>

  <n-modal
      v-model:show="modalShow"
      :mask-closable="false"
      preset="dialog"
      title="选择语音"
      content="你确认"
      positive-text="确认"
      negative-text="取消"
      @positive-click="addVoice"
  >
    <n-form
        ref="storyFormRef">
      <n-form-item label="引用音频" path="mediaId">
        <n-select
            v-model:value="audioFileId"
            :options="mediaInfoList"
            label-field="name"
            value-field="fileUserId"
            :render-option="mediaInfoSelectRender"
            clearable>
        </n-select>
      </n-form-item>
    </n-form>
  </n-modal>
</template>

<script setup lang="ts">
import {h, onMounted, ref} from 'vue';
import {NTag, NTooltip} from 'naive-ui';
import {storyController} from "@/api/story/story.api";
import {mediaController} from "@/api/controller/media/mediaController";
import fileFunction from "@/libs/globalFunction/file";
const audioPlayer = ref(null)
const modalShow = ref(false)
const audioFileId = ref('')
const mediaInfoList = ref([])

const props = defineProps({
  storyId: {
    type: String,
    required: true
  }
})

const story = ref(null)


onMounted(() => {
  getMediaList()
  getStory()
})
const removeAudioFile = () => {
  audioFileId.value = null
}


const addVoice = () => {
  storyController.addExtraAudioFile(props.storyId, audioFileId.value).then((res: any) => {
    if (res.code === 200) {
      window.$message.success('使用音频成功')
    }
  })
}


const getStory = () => {
  storyController.getStoryById(props.storyId).then((res) => {
    if (res.code === 200) {
      story.value = res.data.story
      audioFileId.value = story.value.extraAudioFileId
    }
  })
}


const getMediaList = () => {
  mediaController.listMediaList({}, {
    page: 1,
    pageSize: 1000
  }).then((res) => {
    if (res.code === 200) {
      mediaInfoList.value = res.data.list
      mediaInfoList.value.forEach((item: any) => {
        item.disabled = true
        if (item.videoToTxtStatus === 'SUCCESS' || item.ocrStatus === 'SUCCESS') {
          item.disabled = false
        }
      })
    }
  })
}


const mediaInfoSelectRender = (info: any) => {
  return h(NTooltip, null, {
    trigger: () => info.node,
    default: () => {
      console.log(info.node)
      if (info.option.disabled) {
        return h(NTag, {type: 'error'}, () => '请将视频/音频转换为文字')
      } else {
        return h(NTag, {type: 'success'}, () => '类型:' + info.option.ext + '     时长:' + formatSeconds(info.option.videoTime / 1000 / 1000))
      }
    }
  })
}

function formatSeconds(seconds:number) {
  const hour = Math.floor(seconds / 3600);
  seconds = seconds % 3600;
  const minute = Math.floor(seconds / 60);
  seconds = Math.floor(seconds % 60);

  return [
    hour.toString().padStart(2, '0'),
    minute.toString().padStart(2, '0'),
    seconds.toString().padStart(2, '0')
  ].join(':');
}
</script>
